<template>

    <div class="message">

        <ul>
            <li class="list-item">
                <div class="card">
                    <h2>访问出现问题</h2>
                    <img slot="img" src="assets/img/default/error.jpg"/>
                    <p>页面不存在</p>
                    <yd-cell-group>
                        <yd-cell-item arrow @click.native="ok()">
                            <span slot="right">知道了</span>
                        </yd-cell-item>
                    </yd-cell-group>
                </div>
            </li>
        </ul>

    </div>

</template>

<script>
module.exports = {
    created () {
        Vue.prototype.$dialog.confirm({
            title: '404',
            mes: '这个地址没有页面哦！',
            opts: [
                {
                    txt: '知道了',
                    color: false,
                    callback: () => {
                        this.$router.push('/')
                    }
                }
            ]
        })
    },
    methods: {
        ok () {

        }
    }
}
</script>


<style scoped>
.message {
    padding: 0rem;
    overflow-y: scroll;
}
    li {
        margin-bottom: .15rem;
    }
.card {
    background-color: #fff;
    padding: .3rem;
}
.card > img {
    width: 100%;
    margin-top: .1rem;
    margin-bottom: .1rem;
    object-fit: cover;
}
.card > h2 {
    font-size: .38rem;
    font-weight: normal;
}
.card > p {
    font-size: .28rem;
}
.card > .tag {
    font-size: .28rem;
    float: right;
    color: #666;
}
.list-item {
    display: block;
    min-height: 1rem;
}

</style>
